<template>
  <div class="root">
    <div class="content">
    <div class="left">
      <img v-if="url" :src="url">
      <img v-else src="../../assets/images/默认医院.jpg">
    </div>
    <div class="mid">
      <span class="font-mid1">{{ hospital.name }}</span>
      <span class="font-mid2">{{ hospital.phone }}</span>
      <el-collapse>
        <el-collapse-item title="医院简介" name="1">
          <span class="font-mid3">{{ hospital.briefIntroduction }}</span>
        </el-collapse-item>
      </el-collapse>
    </div>
    </div>
    <div class="room">
      <!-- 展示每个科室 -->
      <Card_Room v-if="departments.length>0" v-for="(item,index) in departments" 
      :key="index" :RoomInfo="item" :hospital="$route.query.hospital">
      </Card_Room>
      <div v-else class="empty">暂无数据</div>
    </div>
  </div>
</template>

<script setup>
import Card_Room from '@/components/Card_Room.vue';
import { onMounted,ref } from 'vue';
import { reqGetHospitalinfo } from '@/api/hospital';
import { useRoute } from 'vue-router';
// import queryString from 'query-string';

const $route=useRoute()

// const getUrl=(originalUrl)=>{
//   if(!originalUrl){
//     return
//   }
//   // 分割为基础url和查询参数
//   const parsed = queryString.parseUrl(originalUrl);

//   // 提取 mediaurl 参数的值
//   const mediaUrlEncoded = parsed.query.mediaurl;

//   // 解码 mediaurl 参数的值
//   const realImageUrl = decodeURIComponent(mediaUrlEncoded);
//   return realImageUrl
// }

// 存储医院信息
let departments=ref([])
let hospital=ref({})
let url=ref('')
onMounted(async ()=>{
  // 获取医院详细数据
  let res=await reqGetHospitalinfo($route.query.id)
  // console.log(res);

  if (res.data.code == 1) {
    departments.value = res.data.data.departments;
    hospital.value = res.data.data.hospital;
    // url.value=getUrl(res.data.data.hospital.img)
    url.value=res.data.data.hospital.img
  }

})
</script>

<style lang="scss" scoped>
.root{
  min-width: 1800px;
  .content{
    display: flex;
    background-color: #fff;
    margin-bottom: 40px;
    padding-right: 20px;

    .left{
      margin-top: 10px;
      margin-bottom: 10px;
      img{
        width: 370px;
        margin-right: 10px;
      }
    }
    .mid{
      width: auto;
      display: flex;
      flex-direction: column;
      margin: 5px 5px;
      padding-right: 30px;
      .font-mid1{
        min-height: 20px;
        font-size: 40px;
        font-weight: bold;
        margin-top: 10px;
      }
      .font-mid2{
        min-height: 100px;
        font-size: 20px;
        color: #ada7a7;
        margin-top: 20px;
      }
      .font-mid3{
        min-height: 10px;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 20px;
        max-width: 1900px;
      }
    }
  }
  
  .room{
    .empty{
        font-size: 32px;
        color: #bbb;
        margin-left: 50%;
      }
  }
  ::v-deep(.el-collapse-item__header){
    border-bottom: none !important;
    font-size: 32px;
    font-weight: bold;
    width: 220px;
  }
  ::v-deep(.el-collapse-item__header):hover{
    color: #0984e3;
  }
  ::v-deep(.el-collapse){
    border-top: none;
    border-bottom: none !important; /* 取消底部横线 */
  }
  ::v-deep(.el-collapse-item__arrow){
    margin-left: 40px;
  }
}
</style>
